<!doctype html>
<html>
  <head>
    <link rel="stylesheet" href="/static/output.css" />
    <link rel="stylesheet" href="{{ search_component_url | safe }}/index.css" />
    <link
      rel="icon"
      type="image/x-icon"
      href="{{ partner_configuration.FAVICON_URL }}"
    />
    <link
      rel="stylesheet"
      href="https://unpkg.com/@highlightjs/cdn-assets@11.9.0/styles/default.min.css"
    />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    {% if params.openGraphMetadata %} {% if params.openGraphMetadata.title %}
    <meta property="og:title" content="{{params.openGraphMetadata.title}}" />
    {% endif %}
    <meta
      property="og:url"
      content="{{params.baseUrl}}/public_page/{{params.datasetId}}"
    />
    <meta property="og:type" content="website" />
    {% if params.openGraphMetadata.image %}
    <meta property="og:image" content="{{params.openGraphMetadata.image}}" />
    {% endif %} {% if params.openGraphMetadata.description %}
    <meta
      property="og:description"
      content="{{params.openGraphMetadata.description}}"
    />
    {% endif %} {% endif %}

    <script
      defer
      data-domain="demos.trieve.ai"
      src="https://plausible.trieve.ai/js/script.js"
    ></script>

    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.1/js/all.min.js"
      data-auto-replace-svg
    ></script>
    <script src="https://unpkg.com/@highlightjs/cdn-assets@11.9.0/highlight.min.js"></script>
    <script src="https://unpkg.com/@highlightjs/cdn-assets@11.9.0/languages/javascript.min.js"></script>
    <script src="https://player.vimeo.com/api/player.js"></script>

    <script type="module">
      window.paramsData = {{params | tojson}};
      const brandFontFamily = window.paramsData.brandFontFamily;
      if (brandFontFamily) {
        const link = document.createElement("link");
        link.href = `https://fonts.googleapis.com/css2?family=${brandFontFamily.replace(
          / /g,
          "+"
        )}&display=swap`;
        link.rel = "stylesheet";
        document.head.appendChild(link);

        await document.fonts.load("16px " + brandFontFamily);

        const body = document.querySelector("body");
        body.style.fontFamily = `"${brandFontFamily}", sans-serif`;
      }
    </script>

    <style>
      @import url('https://fonts.googleapis.com/css2?family=Architects+Daughter&family=Maven+Pro:wght@400..900&family=Noto+Color+Emoji&display=swap');

      :root {
        --brand-color: #a33eb5;
        --brand-color: {{params.brandColor}};
        --hero-bg-color: {{params.heroPattern.backgroundColor}};
        --hero-fg-color: {{params.heroPattern.foregroundColor}};
        --theme-text-color: {{'white' if (params.theme == 'dark') else 'black'}};
      }

      *,
      *:before,
      *:after {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
      }

      #product-display {
        background-color: var(--hero-bg-color);
      }

      nav {
        border-color: var(--brand-color);
        background-color: var(--hero-bg-color);
        color: var(--theme-text-color);

        a:hover,button:hover {
          color: var(--brand-color);
          svg {
            fill: var(--brand-color);
          }
        }
      }

      .nav-icon {
        width: 18px;
      }

      .nav-icon:hover {
        fill: var(--brand-color);
      }

      .action-link {
        background-color: var(--brand-color);
        padding: 8px;
        padding-left: 12px;
        padding-right: 12px;
        border-radius: 0.25rem;
        color: white;
        fill: white;

        &:hover {
          background-color:  color-mix(in srgb, var(--brand-color), black 20%);
          color: white;
          fill: white;

          svg {
            fill: white;
          }
        }
      }

      .tab-content a {
        color: var(--brand-color);
        font-weight: 500;
        display: inline-flex;
        align-items: start;
        gap: 4px;
        text-decoration-line: none;

        :hover {
          text-decoration-line: underline;
        }
      }

      #root #open-trieve-modal {
        display: none;
      }

      .trieve-inline-modal {
        margin-top: 1rem;
      }

      body {
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        font-family: "Maven Pro", sans-serif;
      }

      body #open-trieve-modal.demo-open-button:not(.responsive) {
        height: 4rem;
        border-radius: 9999px;
        width: 100%;
        max-width: 72rem;
        margin-left: auto;
        margin-right: auto;
        outline: none;
        background-color: {{'#18181B' if (params.theme == 'dark') else '#FAFAFA'}};
        border: 1px solid {{'#3f3f46' if (params.theme == 'dark') else '#d4d4d8'}};

        &:hover {
          outline: none;
          border: 1px solid var(--brand-color);
        }

        div>div {
          font-size: 1rem;
          @media (min-width: 640px) {
            font-size: 1.25rem;
            line-height: 50px;
          }
        }

        .action-icons {
          display: flex;
          gap: 0.75rem;
          font-size: 1rem;
          padding-right: 0.5rem;
        }
      }

      .recs-section {
        width: 100% !important;

        .recs {
          padding-left: 4px;
          padding-right: 4px;
        }
      }

      .rec-button.active {
        outline-offset: 2px;
        outline: 2px solid var(--brand-color);
      }

      h1,h2,h3,h4,h5,h6,p,pre,button,nav,.paragraph-text,.blurb-html {
        position: relative;
        z-index: 15;
      }

      .chat-footer-wrapper {
        z-index: 20;
      }

      .trieve-footer {
        z-index: 20;
      }

      .floating-action-button {
        z-index: 20;
      }

      main {
        line-height: 1.6;
        position: relative;
        display: flex;
        position: relative;
        flex-direction: column;
        padding-top: 1rem;
        gap: 1rem;
      }

      .corner-logo {
        max-width: 120px;
        max-height: 80px;
      }

      .dev-back-button {
        background-color: #f5f5f5;
        border-radius: 0.5rem;
        border: 1px solid #e5e5e5;
        color: black;
        padding: 0.3rem;
        font-size: 0.8rem;
        text-decoration: none;
        z-index: 20;
      }

      .made-with-love {
        margin-right: 0.5rem;
        margin-bottom: 0.5rem;
        margin-left: auto;
      }

      .heart {
        font-family: Apple Color Emoji,Segoe UI Emoji,Noto Color Emoji,Android Emoji,EmojiSymbols,EmojiOne Mozilla,Twemoji Mozilla,Segoe UI Symbol,Noto Color Emoji Compat,emoji;
        content: '\2764';
      }


      .basic {
        padding: 1rem;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
      }

      #tab-content {
        border: 1px solid var(--brand-color);
        border-radius: 0rem 0.5rem 0.5rem 0.5rem;
        padding: 0.9rem;
        background-color: var(--hero-bg-color);
        color: var(--theme-text-color);
      }

      pre {
        padding: 0rem;
        border-radius: 0.25rem;
      }

      #tab-buttons {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 0.25rem;
      }

      .tab-button {
        background-color: var(--hero-bg-color);
        border-radius: 0.5rem 0.5rem 0rem 0rem;
        border: 1px solid var(--brand-color);
        border-bottom-color: transparent;
        color: var(--theme-text-color);
        padding: 0.4rem;
        padding-top: 0.5rem;
        font-size: 0.9rem;
        padding-inline: 1rem;
        text-decoration: none;
        cursor: pointer;
      }

      .tab-button.active {
        background-color: var(--brand-color);
        color: white;
      }

      .signature {
        font-family: "Architects Daughter", cursive;

        .creator {
          &:hover {
            color: #0a66c2;
          }
        }

        .trieve-company-name {
          &:hover {
            color: #a33eb5;
          }
        }
      }

      body #open-trieve-modal:not(.responsive) {
        width: 100%;
        max-width: 42rem;
      }

      .text-brand-color {
        color: var(--brand-color);

        &:hover {
          background-color: transparent;
        }
      }

      button.text-brand-color:hover {
        background-color: color-mix(in srgb, white, black 20%);
      }

      .bg-brand-color {
        background-color: var(--brand-color);

        &:hover {
          background-color:  color-mix(in srgb, var(--brand-color), black 20%);
        }
      }

      .product-video-wrapper {
        position: relative;
        margin-top: 0.75rem;
        margin-bottom: 0.75rem;
        z-index: 15;
      }

      .blurb-html {
        iframe {
          border-radius: 0.375rem;
        }
      }

      .video-wrapper {
        position: fixed;
        bottom: 20px;
        left: 20px;
        width: 100%;
        max-width: 18.5rem;
        height: 14.5rem;
        margin: 0;
        padding: 0;
        z-index: 20;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 0.5rem;
      }

      .video-wrapper iframe {
        width: 100%;
        height: 100%;
        border: none;
        object-fit: cover;
      }

      @media (max-width: 640px) {
        .video-wrapper {
          position: relative;
          bottom: 0;
          left: 0;
          margin: 0 auto;
          max-width: calc(100vw - 4rem);
          height: 20rem;
        }
      }

      .starter-questions {
        button:not(.bg-brand-color) {
          background-color: {{'#18181B' if (params.theme == 'dark') else '#FAFAFA'}};

          &:hover {
            background-color: color-mix(in srgb, {{'#18181B' if (params.theme == 'dark') else '#FAFAFA'}}, black 20%);
          }
        }
      }

      .example-questions {
        button:not(.bg-brand-color) {
          background-color: {{'#18181B' if (params.theme == 'dark') else '#F3F4F6'}};

          &:hover {
            background-color: color-mix(in srgb, {{'#18181B' if (params.theme == 'dark') else '#F3F4F6'}}, black 20%);
          }
        }
      }

      .brand-name {
        font-weight: 500;
      }

      #trieve-search-modal.ecommerce:not(.trieve-popup-modal) {
        max-width: 20rem !important;
        @media (min-width: 768px) {
          max-width: 33rem !important;
        }
        @media (min-width: 1024px) {
          max-width: 30rem !important;
        }

        @media (min-width: 1536px) {
          max-width: 38rem !important;
        }
      }
    </style>

    <script type="module">
        import {renderToDiv} from '{{ search_component_url | safe }}/vanilla/index.js';
        const root = document.querySelector("#root");

        let mode = "none";

        const params = {{ params | tojson }};
        params.partnerSettings = {
          "partnerCompanyName": "{{ partner_configuration.COMPANY_NAME }}",
          "partnerCompanyUrl": "{{ partner_configuration.COMPANY_URL | safe }}",
          "partnerCompanyFaviconUrl": "{{ partner_configuration.FAVICON_URL | safe }}",
        }
        if (params.inline) {
          const inlineParams = {{ params | tojson }};
          const inlineRoot = document.querySelector("#inline-root");
          inlineParams.cssRelease = mode;
          inlineParams.groupTrackingId = params.singleProductOptions?.groupTrackingId;
          inlineParams.cleanGroupName = params.singleProductOptions?.productName;
          inlineParams.showFloatingButton = false;
          inlineParams.showFloatingSearchIcon = false;
          inlineParams.showFloatingInput = false;

          if (inlineParams.singleProductOptions && inlineParams.singleProductOptions.productQuestions) {
            inlineParams.defaultAiQuestions = inlineParams.singleProductOptions.productQuestions;
          }

          renderToDiv(inlineRoot, {
            ...inlineParams,
          })
        }

        if (!params.showResultHighlights) {
          params.hideChunkHtml = true
        }

        params.buttonTriggers = [
          { selector: "#tr-search-icon", mode: params.defaultSearchMode ?? "search" },
          { selector: ".demo-open-button", mode: params.defaultSearchMode ?? "search" },
          ...(params.buttonTriggers ?? [])
        ];
        params.inline = false;
        params.cssRelease = mode;
        renderToDiv(root, {
          ...params,
        })


      const starterQuestions = document.querySelectorAll(
        ".example-questions button"
      );

      starterQuestions.forEach((button) => {
        button.addEventListener("click", async () => {
          const text =
            button.textContent.trim() === "Ask something else"
              ? null
              : button.textContent.trim();

          window.dispatchEvent(
            new CustomEvent("trieve-open-with-text", {
              detail: {
                text,
              },
            })
          );
        });
      });
    </script>
  </head>

  <body class="{{params.theme}}" style="{{body_style}}; {{ background_color }}">
    {% include "navbar.html" %}
    <main>
      <div id="root"></div>
      <div class="basic">
        <div class="w-full mb-10 sm:mb-12 lg:mb-14">
          <div class="mx-auto py-4 px-4 sm:px-6 lg:max-w-7xl lg:px-8 w-full">
            <button
              id="open-trieve-modal"
              type="button"
              class="demo-open-button"
            >
              <div>
                <i class="fa-solid fa-magnifying-glass w-6 h-6 pl-1"></i>
                <div>{{ params.placeholder or "Search..." }}</div>
              </div>
              <span class="action-icons">
                <div>
                  <i class="fa-solid fa-microphone"> </i>
                </div>
                <div>
                  <i class="fa-solid fa-image"> </i>
                </div>
              </span>
            </button>
          </div>
          {% if params.defaultAiQuestions and params.defaultAiQuestions|length >
          0 %}
          <div
            class="example-questions flex justify-center flex-wrap gap-1 mt-2 mx-auto px-4 sm:px-6 lg:max-w-7xl lg:px-8 w-full"
          >
            {% for question in params.defaultAiQuestions %}
            <button
              class="text-brand-color text-white px-4 py-2 rounded-full text-sm sm:text-base"
            >
              {{ question }}
            </button>
            {% endfor %}
          </div>
          {% endif %}
        </div>
        {% if params.videoLink and params.videoPosition == "static" %}
        <div
          class="mx-auto py-4 px-8 sm:px-12 lg:max-w-7xl lg:px-20 w-full blurb-html"
        >
          <div style="padding: 56.25% 0 0 0; position: relative">
            <iframe
              src="{{params.videoLink}}"
              frameborder="0"
              allow="autoplay; fullscreen; picture-in-picture; clipboard-write"
              style="
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
              "
            ></iframe>
          </div>
        </div>
        {% endif %} {% if params.singleProductOptions and
        params.singleProductOptions.productName %} {% include "product.html" %}
        {% endif %} {% if tabs and tabs|length > 0 %} {% include "tabs.html" %}
        {% endif %} {% if params.videoLink and params.videoPosition ==
        "floating" %}
        <div class="video-wrapper">
          <iframe
            src="{{params.videoLink}}"
            frameborder="0"
            allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
            allowfullscreen
          >
          </iframe>
        </div>
        {% endif %}
      </div>
    </main>
  </body>
</html>
